<template>
  <div class="duocai">
    <img src="@/assets/images/duocai.png" alt class="bg" />

    <div class="main">
      <div class="title">典雅多彩，颜值出色</div>
      <div class="sub">静谧深邃的至尊黑，纯洁典雅的皓月银，尽显奢华的荣耀金，柔情似水珊瑚红，梦幻科技幻影蓝，五种经典搭配，五抹亮丽风景</div>
      <div class="items">
        <img
          src="@/assets/images/kj1.png"
          alt
          class="item"
          :class="{ on: active==1 }"
          @mouseenter="active=1"
        />
        <img
          src="@/assets/images/kj2.png"
          alt
          class="item"
          :class="{ on: active==2 }"
          @mouseenter="active=2"
        />
        <img
          src="@/assets/images/kj3.png"
          alt
          class="item"
          :class="{ on: active==3 }"
          @mouseenter="active=3"
        />
        <img
          src="@/assets/images/kj4.png"
          alt
          class="item"
          :class="{ on: active==4 }"
          @mouseenter="active=4"
        />
        <img
          src="@/assets/images/kj5.png"
          alt
          class="item"
          :class="{ on: active==5 }"
          @mouseenter="active=5"
        />
      </div>
      <div class="btns">
        <div class="btn" @mouseenter="active=1">
          <div class="outcc">
            <div class="incc" style="background: #FF8089"></div>
          </div>
          <div class="text">珊瑚红</div>
        </div>
        <div class="btn" @mouseenter="active=2">
          <div class="outcc">
            <div class="incc" style="background: #FFC069"></div>
          </div>
          <div class="text">荣耀金</div>
        </div>
        <div class="btn" @mouseenter="active=3">
          <div class="outcc">
            <div class="incc" style="background: #BFBFBF"></div>
          </div>
          <div class="text">皓月银</div>
        </div>
        <div class="btn" @mouseenter="active=4">
          <div class="outcc">
            <div class="incc" style="background: #000000"></div>
          </div>
          <div class="text">至尊黑</div>
        </div>
        <div class="btn" @mouseenter="active=5">
          <div class="outcc">
            <div class="incc" style="background: #54CBFF"></div>
          </div>
          <div class="text">幻影蓝</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: null
    };
  }
};
</script>

<style lang="scss" scoped>
.duocai {
  position: relative;
  min-width: 1800px;
  .bg {
    max-width: 100%;
  }
  .main {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .title {
      margin-top: 300px;
      height: 79px;
      font-size: 60px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      line-height: 79px;
      letter-spacing: 4px;
    }
    .sub {
      width: 660px;
      height: 74px;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: rgba(153, 153, 153, 1);
      line-height: 37px;
      letter-spacing: 2px;
      margin-top: 50px;
      margin-bottom: 300px;
    }
    .items {
      display: flex;
      justify-content: center;
    }
    .item {
      width: 450px;
      margin-top: 0;
      transition: all 0.5s;
      position: relative;
      &.on {
        transform: translateY(-12%);
      }
      &:nth-of-type(1) {
        z-index: 9;
      }
      &:nth-of-type(2) {
        z-index: 8;
        margin-left: -200px;
      }
      &:nth-of-type(3) {
        z-index: 7;
        margin-left: -200px;
      }
      &:nth-of-type(4) {
        z-index: 6;
        margin-left: -200px;
      }
      &:nth-of-type(5) {
        z-index: 5;
        margin-left: -200px;
      }
    }
    .btns {
      display: flex;
      justify-content: space-around;
      margin-top: 100px;
      width: 90%;
      padding: 0 80px;
    }
    .btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      .text {
        margin-top: 32px;
        width: 103px;
        height: 42px;
        font-size: 32px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 1);
        line-height: 42px;
        letter-spacing: 2px;
      }
      .outcc {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
      }
      .incc {
        width: 34px;
        height: 34px;
        border-radius: 50%;
      }
    }
  }
}
</style>